<template>
	<view class="app">
		<uni-forms :model="data.formData" ref="userInfoForm" label-width="150rpx" label-align="left" :rules="data.rules" validate-trigger="blur">
			<uni-forms-item label="昵称" ><uni-easyinput v-model.trim="data.formData.nickname" :clearable="false"/></uni-forms-item>
			<uni-forms-item label="密码" name="password" required ><uni-easyinput v-model.trim="data.formData.password" :clearable="false" type="password"/></uni-forms-item>
			<uni-forms-item label="确认密码" name="repassword" >
				<uni-easyinput v-model.trim="data.formData.repassword" type="password" :clearable="false"/>
				</uni-forms-item>
			<uni-forms-item label="真实姓名"><uni-easyinput v-model.trim="data.formData.realname" :clearable="false" /></uni-forms-item>
			<uni-forms-item label="年龄" name="age" required ><uni-easyinput v-model.trim="data.formData.age" :clearable="false"/></uni-forms-item>
			<uni-forms-item label="职业"><uni-easyinput v-model.trim="data.formData.occupation" :clearable="false"/></uni-forms-item>
			<uni-forms-item label="地址"><uni-easyinput v-model.trim="data.formData.address" :clearable="false"/></uni-forms-item>
			<uni-forms-item label="性别" name="gender"required  >
				<uni-easyinput v-model.trim="data.formData.gender" :clearable="false"/>
			</uni-forms-item>
			<uni-forms-item label="手机号" name="phone" required ><uni-easyinput v-model.trim="data.formData.phone" :clearable="false"/></uni-forms-item>
			<uni-forms-item label="邮箱" name="email" required ><uni-easyinput v-model.trim="data.formData.email" :clearable="false"/></uni-forms-item>
			<uni-forms-item label="个人简介" name="introduction" required >
				<uni-easyinput v-model.trim="data.formData.introduction" type="textarea"  :clearable="false"/>
			</uni-forms-item>
		</uni-forms>

		<u-button @click="submit">提交</u-button>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		unref,
		computed,
		watch
	} from 'vue';
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		getUserInfoById,modifyUserInfo
	} from '../../api/user.js';
	const userInfoForm = ref();
	const data = reactive({
		formData: {
			nickname: '',
			password: '',
			repassword: '',
			realname: '',
			age: 20,
			occupation: '',
			address: '',
			gender: '保密',
			phone: '',
			email: '',
			introduction: ''
		},
		rules: {
			password:{
				rules:[
					{
						validateFunction:function(rule,value,data,callback){
													if(value.length < 6){
														callback('请输入不少于6位的密码')
													}
													return true
												},
												errorMessage: '请输入不少于6位的密码',
					}
				],
				 
			},
			repassword:{
				rules:[
					{
						validateFunction:function(rule,value,data,callback){
													if(value != data.password){
														callback('两次输入的密码不一致')
													}
													return true
												}
					}
				],
				 
			},
			phone: {
				rules:[
					{
						required: true,
						pattern:/^(13[0-9]|14[579]|15[0-35-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
						errorMessage:'手机号码不正确'
					},
					{
						validateFunction:function(rule,value,data,callback){
													if(value == ''){
														callback('请输入手机号')
													}
													return true
												}
					}
				],
				 
			},
			email: {
				rules:[
					{
						required: true,
						pattern:/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/,
						errorMessage:'邮箱不正确'
					},
					{
						validateFunction:function(rule,value,data,callback){
													if(value == ''){
														callback('请输入邮箱')
													}
													return true
												}
					}
				],
				 
			},
			introduction: {
				rules:[
					{
						required: true,
						minLength:5,
						errorMessage:'简介不能少于5个字'
					}
				],
				 
			},
			age:{
				rules:[
					{
						required: true,
						pattern:/^\d+$/,
						format:'number',
						errorMessage:'请输入数字'
					}
				],
				 
			},
			gender:{
				rules:[
					{
						validateFunction:function(rule,value,data,callback){
													if(value != '男' && value != '女' && value != '保密' && value.length == 0){
														callback('请输入男、女、保密其中一种')
													}
													return true
												}
					}
				],
				 
			}
			
		}
	});
	
	onReady(() => {
		userInfoForm.value.setRules(data.rules);
	});
	let user_id = ref('')
	const submit = (e) => {
		userInfoForm.value.validate().then(async(res) => {
			console.log('验证成功',res)
			const result = await modifyUserInfo({
						user_id:uni.getStorageSync('userInfo').user_id,
						nickname:data.formData.nickname,
						password:data.formData.password,
						realname:data.formData.realname,
						age:data.formData.age,
						occupation:data.formData.occupation,
						address:data.formData.address,
						gender:data.formData.gender=='保密'?0:data.formData.gender=='女'?1:2,
						phone:data.formData.phone,
						email:data.formData.email,
						introduction:data.formData.introduction
					})
					if(result.code == 1){
						uni.showToast({
							title: "修改成功",
							icon: 'none'
						});
						uni.setStorageSync('userInfo',result.data)
						uni.navigateBack()
					}	
		}).catch((err) => {
			console.log('验证失败',err)
		})
	}

	onMounted(async () => {
		const result = await getUserInfoById({
			user_id: uni.getStorageSync('userInfo').user_id
		})
		result.data.gender = result.data.gender == 0 ? '保密': result.data.gender == 1 ? '女' : '男'
		data.formData = result.data
	})
</script>

<style scoped>
	.app {
		padding: 10rpx;
	}
</style>